﻿<MCard Class="mx-auto" Height="300" Width="330">
    <MNavigationDrawer Permanent Width="@("100%")">
        <MRow Class="fill-height" NoGutters>
            <MNavigationDrawer Dark MiniVariant MiniVariantWidth="56" Permanent>
                <MListItem Class="px-2">
                    <MListItemAvatar Size="40">
                        <MImage Src="@("https://randomuser.me/api/portraits/women/75.jpg")"></MImage>
                    </MListItemAvatar>
                </MListItem>

                <MDivider></MDivider>

                <MList Dense Nav>
                    @foreach (var item in _items)
                    {
                        <MListItem>
                            <MListItemAction>
                                <MIcon Dark>@item.Icon</MIcon>
                            </MListItemAction>

                            <MListItemContent>
                                <MListItemTitle>@item.Title</MListItemTitle>
                            </MListItemContent>
                        </MListItem>
                    }
                </MList>
            </MNavigationDrawer>

            <MList Class="grow">
                @foreach (var link in _links)
                {
                    <MListItem Link>
                        <MListItemTitle>@link</MListItemTitle>
                    </MListItem>
                }
            </MList>
        </MRow>
    </MNavigationDrawer>
</MCard>

@code
{
    private string[] _links = new string[3] { "Home", "Contacts", "Settings" };
    private class ItemDemo
    {
        public string Title { get; set; }
        public string Icon { get; set; }
    }
    private List<ItemDemo> _items = new()
    {
        new ItemDemo { Title = "Home", Icon = "mdi-view-dashboard" },
        new ItemDemo { Title = "About", Icon = "mdi-forum" }
    };
}